<template>
  <div class="course">
    <div class="header">
      <typeSelect />
    </div>
    <div class="container_box">
      <courseVue :vedioList="vedioList" />
    </div>
    <div class="pagination">
      <span class="demonstration">共{{pagination.total}}条</span>
      <el-pagination background layout="prev, pager, next" :page-size="12" @current-change="handleCurrentChange" :total="pagination.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import typeSelect from '@/components/library/typeSelect.vue'
import courseVue from '@/components/library/course.vue'
import { getCourseList } from '@/api/course'
export default {
  components: {
    typeSelect,
    courseVue
  },
  data() {
    return {
      pagination: {
        total: 0,
        size: 12,
        current: 1
      },
      resData: {},
      vedioList: []
    }
  },
  mounted() {
    this.getCourseListFn()
  },
  methods: {
    handleCurrentChange(val) {
      this.pagination.current = val
      this.getCourseListFn()
    },
    getCourseListFn() {
      const data = {
        course: {
          subjectId: this.resData.subjectId
        },
        page: this.pagination,
        sort: this.resData.sortNumber
      }
      getCourseList(data).then(res => {
        this.vedioList = res.data.records
        this.pagination.size = res.data.size
        this.pagination.total = res.data.total
        this.pagination.current = res.data.current
      })
    }
  },
  computed: {
    getSearchParms() {
      return this.$store.state.post.searchParms
    }
  },
  watch: {
    getSearchParms: {
      //nval改变后的新数据，oval改变前的旧数据
      handler(nval, oval) {
        this.resData = nval
        this.getCourseListFn()
      },
      deep: true // 深度监听
    }
  }
}
</script>

<style lang="less" scoped>
.header {
  margin-top: 10px;
}
.course {
  display: flex;
  flex-direction: column;
}
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 20px;
}
</style>